<template>
  <a-card>
      <a-form layout="horizontal" :form="searchForm" @submit="handleSearch" autocomplete="off">
        <a-row type="flex" justify="start" :gutter="30">
          <a-col :md="14" :sm="24">
            <a-form-item>
              <a-space>
                <a-button type="primary" icon="plus" @click="showEditForm(0)">{{$t('add')}}</a-button>
              </a-space>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <a-table size="middle" :columns="columns" :data-source="data" :row-key="record => record.roleId" :loading="loading">
        <div slot="action" slot-scope="text, record">
          <a-space>
            <a-button @click="showEditForm(record.roleId)">
              <a-icon type="edit"/>{{$t("edit")}}
            </a-button>
            <a-button @click="openPrePage(record.roleId, record.roleName)">
              <a-icon type="setting"/>{{$t("permission")}}
            </a-button>
          </a-space>
        </div>
        <template v-for="(item, index) in columns" :slot="item.slotName">
          <span :key="index">{{ $t(item.slotName) }}</span>
        </template>
      </a-table>

      <a-modal v-model="editVisible" :maskClosable="false" :title="editTitle" :confirm-loading="confirmLoading" :okText="$t('submit')" @ok="saveEditForm()" @cancel="closeEditForm()">
        <a-form-model ref="editForm" layout="horizontal" :model="editForm" :label-col="{ span: 4 }" :wrapper-col="{ span: 15 }" autocomplete="off" :rules="editFormRules">
          <a-input v-model="editForm.roleId" type="hidden"/>
          <a-form-model-item :label="$t('name1')" prop="roleName">
            <a-input v-model="editForm.roleName" />
          </a-form-model-item>
          <a-form-model-item :label="$t('remark')" prop="roleRemark">
            <a-input v-model="editForm.roleRemark" />
          </a-form-model-item>
        </a-form-model>
      </a-modal>
  </a-card>
</template>

<script>
import {getRoleList, saveRole} from '@/services/user'

export default {
  name: "RoleList",
  i18n: require('../i18n'),
  data () {
    return {
      data : [],
      columns:[
        {
          title: 'ID',
          dataIndex: 'roleId',
          align:'center',
        },
        {
          dataIndex: 'roleName',
          align:'left',
          slotName: "name1",
          slots: { title: 'name1' },
        },
        {
          dataIndex: 'roleRemark',
          align:'left',
          slotName: "remark",
          slots: { title: 'remark' },
        },{
          align:'center',
          scopedSlots: { customRender: 'action' },
          slotName: "operation",
          slots: { title: 'operation' },
        }
      ],
      loading: false,
      confirmLoading: false,
      searchParams: {},
      searchForm: this.$form.createForm(this, { name: 'search' }),
      editVisible: false,
      editTitle:"",
      editForm: {
        roleId: 0,
        roleName: "",
        roleRemark: "",
      },
      editFormNull: {
        roleId: 0,
        roleName: "",
        roleRemark: "",
      },
      editFormRules: {
        roleName: [{ required: true, message: '', trigger: 'blur' }]
      },
      roleList:[],
    }
  },
  methods: {
    handleSearch(e){
      e.preventDefault();
      this.searchForm.validateFields((error, values) => {
        this.searchParams = values;
      });
      this.fetchData()
    },
    fetchData(){
      this.loading = true
      getRoleList().then(res => {
        this.data = res.data.data
        this.loading = false
      }).catch(error => {
        console.log(error)
        this.loading = false
      })
    },
    showEditForm(roleId){
      this.editVisible = true
      if(roleId === 0) {
        this.editTitle = this.$t('add')
      }else{
        this.editTitle = this.$t('edit')
        const data = this.data.filter(item => item.roleId === roleId)[0]
        this.editForm = JSON.parse(JSON.stringify(data))
      }
    },
    closeEditForm(){
      this.confirmLoading = false
      this.editVisible = false
      this.editForm = JSON.parse(JSON.stringify(this.editFormNull))
      this.$refs.editForm.clearValidate()
    },
    saveEditForm(){
      this.$refs.editForm.validate(valid => {
        if (valid) {
          this.confirmLoading = true
          saveRole(this.editForm).then(res => {
            if(res.data.success) {
              this.$message.success({content: this.$t('submitSuccess')})
              this.closeEditForm()
              this.fetchData()
            }else{
              this.$message.error({content: this.$t(res.data.message)})
            }
          }).catch(error => {
            console.log(error)
          })
        } else {
          return false;
        }
      });
    },
    openPrePage(roleId, roleName){
      this.$openPage('rolefuns/' + roleId, this.$t("set_role_funs") + "[" + roleName + "]")
    },
  },
  created() {
    this.fetchData()
  }
}
</script>